<template>
  <div style="width: 100%; height: 100%; overflow: hidden">
    <div class="filed" @click="showPop">
      <div class="label" v-if="!comValue">{{ label }}</div>
      <div class="value">{{ comValue }}</div>
      <img
        class="rightIcon"
        src="../../assets/img/common/selectRow.png"
        alt=""
      />
    </div>
    <van-popup v-model:show="showPicker" round position="bottom">
      <van-picker
        :key="keyValue"
        :default-index="selectIndex"
        ref="picker"
        swipe-duration="2000"
        show-toolbar
        value-key="name"
        :columns="state.pickerOptions"
        :columns-field-names="{ text: 'name', value: 'code' }"
        @cancel="showPicker = false"
        @confirm="confirm"
      ></van-picker>
    </van-popup>
  </div>
</template>

<script setup>
import { onBeforeMount, watch, ref, reactive } from 'vue'
import { dictStore } from '@/pinia/modules/dict.js'

const props = defineProps({
  // 字典code
  code: {
    require: true,
    default: 'JGLX'
  },
  rules: {
    type: Array,
    default() {
      return [{ required: false }]
    }
  },
  disabled: {
    type: Boolean,
    default: false
  },
  // 绑定标识
  name: {
    type: String,
    require: false
  },
  // 标题
  label: {
    require: true
  },
  // 是否必填
  required: {
    require: false,
    default: false
  },
  // 回显值
  modelValue: {
    require: false,
    default: ''
  },
  // 输入框位置
  iptAlign: {
    require: false,
    default: 'left'
  },
  // 占位文字
  placeholder: {
    require: false,
    default: '请选择'
  },
  // 是否只读
  readonly: {
    require: false,
    default: false
  },
  // 是否可清除
  isClear: {
    require: false,
    default: false
  }
})
const emit = defineEmits(['update:modelValue', 'change'])

const comValue = ref('')
const selectIndex = ref(0)
const showPicker = ref(false)
const keyValue = ref('')
const state = reactive({
  pickerOptions: []
})

watch(
  () => props.modelValue,
  val => {
    if (val || val === 0 || val === '0') {
      let index = state.pickerOptions.findIndex(item => item.code == val)
      comValue.value = props.isClear
        ? !state.pickerOptions[index].code
          ? props.label
          : state.pickerOptions[index].name
        : state.pickerOptions[index].name
      selectIndex.value = index
    } else {
      comValue.value = ''
      selectIndex.value = 0
    }
  },
  { deep: true }
)

const showPop = () => {
  if (props.disabled) {
    return
  }
  showPicker.value = true
}

const confirm = val => {
  comValue.value = val.selectedOptions[0].name
  emit('update:modelValue', val.selectedOptions[0].code)
  emit('change', val.selectedOptions[0])
  showPicker.value = false
}

const initCode = () => {
  let target = dictStore().dict.find(item => item.code == props.code)
  let arr = []
  if (target && target.children.length > 0) {
    target.children.forEach(item => {
      arr.push({ code: item.code, name: item.name })
    })
  }
  console.log(props.isClear)
  if (props.isClear) {
    arr.push({ code: '', name: '全部' })
  }
  state.pickerOptions = arr
  keyValue.value = new Date().getTime()
  console.log(arr)
}

onBeforeMount(() => {
  initCode()
  console.log(dictStore().dict)
})
</script>
<style lang="less" scoped>
.filed {
  display: flex;
  align-items: center;
  .label {
    font-size: 48px;
  }
  .value {
    font-size: 48px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rightIcon {
    width: 32px;
    height: 32px;
    margin-left: 10px;
  }
}
</style>
